import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ActivityIndicator,Toast, Modal } from 'antd-mobile';

import 'antd-mobile/lib/activity-indicator/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/modal/style/index.css';

import { get, post } from '../api/getData';
import {getQueryString} from '../utils/util';
import Hdgz from '../components/Hdgz';
import '../static/styles/index.css';

class Answer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chose: 0,
            user:[],
            goods:[],
            animating:false,
            answerResult:true,
            choseGoods:null,
            result:-1,
            hdgz: false,
            cyCount:18888
        };
    }

    componentDidMount() {
        let __this = this;
        __this.setState({
            animating: true
        });
        var askuid = getQueryString('askuid');
        get('/api/activity/user/' + askuid, {token : 'test'}, function(error, data){
            if(error === null){
                __this.setState({
                    user: data.data,
                });
                get('/api/activity/goods', {token : 'test'}, function(error, data){
                    if(error === null){
                        let goods = [];
                        for (var i = 0; i < data.data.length; i++) {
                            if(i == 4){
                                goods.push([]);
                                goods.push(data.data[i]);
                            }else{
                                goods.push(data.data[i]);
                            }
                        }
                        __this.setState({
                            goods: goods,
                            animating: false
                        });
                    }
                });
            }
        })
        get('/api/activity/cy-count', {}, function(error, data){
            if(error === null){
                __this.setState({
                    cyCount:data.data
                });
            }
        });

        document.title = '中秋佳节';
    }

    chose (chose){
        this.setState({chose});
        let __this = this;
        this.state.goods.map(function(item){
            if(item.id === chose){
                __this.setState({
                    choseGoods: item
                });
            }
        });
    }

    confirm(){
        var chose = this.state.chose;
        var askuid = getQueryString('askuid');
        let __this = this;
        if(chose > 0){
            this.setState({
                animating: true
            });
            post('/api/activity/goods/answer', {token : 'test', answer:chose,ask_uid:askuid}, function(error, data){
                if(error !== null){
                    Toast.fail(error, 1, function(){
                    });
                }else{
                    __this.setState({
                        result: data.data.result
                    });
                }
            });
            this.setState({
                animating: false
            });
        }
    }

    onCloseModal() {
        this.setState({hdgz:false});
    }
    showModel(){
        this.setState({hdgz:true});
    }
    wyc(){
        window.location.href = '/index?token='+getQueryString('token')+'&wid='+getQueryString('wid');
    }

    render() {
        return <div className='moon-bg'>
            <ActivityIndicator
                toast
                text="加载中..."
                animating={this.state.animating}
             />
            <div className='moon-index-content'>
                <div className='moon-index-wfgl'>嘿~ 我是 <img src={this.state.user.headimgurl} />{this.state.user.nickname} </div>
                <div className='moon-index-notice' style={{textAlign:'center'}}>来猜猜我最爱的月饼口味是:</div>
                <div className='moon-index-goods-list'>
                {
                    this.state.goods.map((item, index) => {
                        return (
                            index === 4?
                            <div key='0' className='moon-index-goods sure'>
                                <img onClick={() => this.confirm()} src={require("../static/imgs/queding@2x.png")} alt='确定选择'/>
                                <div>参加人数:{this.state.cyCount}</div>
                                <div className='moon-answer-cai' onClick={() => this.wyc()}>我也要让别人猜</div>
                            </div>
                            :
                            this.state.chose === item.id?
                            <div key={item.id} className='moon-index-goods active' onClick={() => this.chose(item.id)}>
                                <img src={item.img_url} alt={item.title}/>
                                <img className='moon-index-goods-title' src={require(`../static/imgs/goods-title/${item.title}@2x.png`)} alt={item.title}/>
                                <div className='chose'></div>
                            </div>
                            :
                            <div key={item.id} className='moon-index-goods' onClick={() => this.chose(item.id)}>
                                <img src={item.img_url} alt={item.title}/>
                                <img className='moon-index-goods-title' src={require(`../static/imgs/goods-title/${item.title}@2x.png`)} alt={item.title}/>
                                <div className='chose'></div>
                            </div>
                        )
                    })
                }

                </div>
            </div>
            <div className='moon-index-hdgz' onClick={()=>this.showModel()}>活动规则</div>
            <Hdgz hdgz={this.state.hdgz} onCloseModal={this.onCloseModal.bind(this)}></Hdgz>

            {
                this.state.result === 1?
                    <div className='answer-result'>
                        <div className='am-modal-mask'></div>
                        <div className='answer-result-content'>
                            <div className='answer-notice-top'>美丽的嫦娥仙子也不如知心的你，一起赏个月不？</div>
                            <div className='answer-right-result'>
                                <img src={this.state.user.img_url} />
                                <div>{this.state.user.title}</div>
                            </div>
                            <div className='answer-notice-top-1'>恭喜你猜对了！这就是我的最爱！</div>
                            <div className='answer-notice-top-2'>感谢您为好友增加1点默契值</div>
                            <div className='answer-wyc' onClick={() => this.wyc()}>我也要让别人猜</div>
                        </div>
                    </div>
                : this.state.result === 0?
                    <div className='answer-result'>
                        <div className='am-modal-mask'></div>
                        <div className='answer-result-content'>
                            <div className='answer-notice-top'>哎呀，看来咱们还不是一起吃过月饼的交情！</div>
                            <div className='answer-right-result-small'>
                                <img src={this.state.choseGoods.img_url} />
                                <div className='answer-mask'></div>
                                <div>{this.state.choseGoods.title}</div>
                            </div>
                            <div className='answer-right-result-big'>
                                <img src={this.state.user.img_url} />
                                <div>{this.state.user.title}</div>
                            </div>
                            <div className='answer-notice-top-1'>你看！这才是我的最爱！</div>
                            <div className='answer-notice-top-2'>很遗憾，您未能帮助好友增加默契值</div>
                            <div className="answer-wyc" onClick={() => this.wyc()}>我也要让别人猜</div>
                        </div>
                    </div>
                :''
            }
        </div>
    }
}

export default Answer;
